<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fantastic Baby</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				height: 100%;
				/* background:url(./img/13.jpg); */
			}
			.box{
				width: 400px;
				height: 400px;
				margin: 200px auto;
				animation: rotate 4s linear infinite;
				transform-style: preserve-3d;
			}
			.box span{
				width: 200px;
				height: 200px;
				display: block;
				position: absolute;
				top: 100px;
				left: 100px;
			}
			.box span img{
				width: 200px;
				height: 200px;
			}
			.box div{
				width: 400px;
				height: 400px;
				position: absolute;
			}
			.box div img{
				width: 400px;
				height: 400px;
			}
			.box span:nth-child(1){
				transform: translateZ(100px);
			}
			.box span:nth-child(2){
				transform: translateZ(-100px);
			}
			.box span:nth-child(3){
				transform:rotateY(90deg) translateZ(100px);
			}
			.box span:nth-child(4){
				transform:rotateY(-90deg) translateZ(100px);
			}
			.box span:nth-child(5){
				transform:rotateX(90deg) translateZ(100px);
			}
			.box span:nth-child(6){
				transform:rotateX(-90deg) translateZ(100px);
			}
			.box .a{
				transform: translateZ(200px);
			}
			.box .b{
				transform: translateZ(-200px);
			}	
			.box .c{
				transform:rotateY(90deg) translateZ(200px);
			}
			.box .d{
				transform:rotateY(-90deg) translateZ(200px);
			}
			.box .e{
				transform:rotateX(90deg) translateZ(200px);
			}
			.box .f{
				transform:rotateX(-90deg) translateZ(200px);
			}
			.box:hover .a{
				transform: translateZ(400px);
			}
			.box:hover .b{
				transform: translateZ(-400px);
			}
			.box:hover .c{
				transform:rotateY(90deg) translateZ(400px);
			}
			.box:hover .d{
				transform:rotateY(-90deg) translateZ(400px);
			}
			.box:hover .e{
				transform:rotateX(90deg) translateZ(400px);
			}
			.box:hover .f{
				transform:rotateX(-90deg) translateZ(400px);
			}
			@keyframes rotate{
				from{
					transform: rotateX(0deg) rotateY(0deg);
					}
				to{
					transform: rotateX(360deg) rotateY(360deg);
					}
			}	
		</style>
	</head>
    <body>
	<div class="box">
		<span><img src="./img/1.jpg"/></span>
		<span><img src="./img/2.jpg"/></span>
		<span><img src="./img/3.jpg"/></span>
		<span><img src="./img/4.jpg"/></span>
		<span><img src="./img/5.jpg"/></span>
		<span><img src="./img/6.jpg"/></span>
		<div class="a"><img src="./img/1.jpg"/></div>
		<div class="b"><img src="./img/2.jpg"/></div>
		<div class="c"><img src="./img/3.jpg"/></div>
		<div class="d"><img src="./img/4.jpg"/></div>
		<div class="e"><img src="./img/5.jpg"/></div>
		<div class="f"><img src="./img/6.jpg"/></div>
	</div>
	<audio autoplay="autoplay" >
		<source src="漠凌兮、G-DRAGON - Fantastic Baby~1.mp3">
	</audio>
    </body>
</html>

